<template>
    <div class="main"  id="china_map">

    </div>
</template>

<script>
    import china from '../../assets/js/china'
    export default {
        name: "chinaMap",
        components:{
            china
        },
        data(){
            return{
                option:{
                    title: {
                        text: '全国存量规模(亿元)',
                        textStyle:{
                            color: '#ffffff'
                        },
                        subtext: '',
                        x:'center',
                        color:"#ffffff"
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: function (data) {
                            let _data=data.data
                            return "数据:"+ _data.value+"<br/>"+"环比:"+_data.value2+"<br/>"+"同比:"+_data.value3
                        }
                    },
                    //左侧小导航图标
                    visualMap: {
                        show : true,
                        x: 'left',
                        y: 'center',
                        textStyle:{
                            color: '#ffffff'
                        },
                        // splitList: [
                        //   {start:1 , end:1},{start: 1, end: 1},
                        //   {start:1 , end:1 },{start:1 , end:1 },
                        //   {start:1 , end:1 },{start: 1, end:1 },
                        // ],
                        color: ['#047df8', '#2990f9', '#4fa4fa','#75b8fb', '#9bcbfc', '#9fb5ea']
                    },

                    //配置属性
                    series: [{
                        name: '数据',
                        type: 'map',
                        mapType: 'china',
                        roam: true,
                        label: {
                            normal: {
                                show: true  //省份名称
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {//鼠标移入高亮显颜色
                                areaColor: '#2f72c8'
                            }
                        },
                        data:[
                            {name: '北京',value: 68.70,value2:0.5,value3:1.25},{name: '天津',value:50.21,value2:-0.23,value3:0.87 },
                            {name: '上海',value: 140.21,value2:0.5,value3:1.5 },{name: '重庆',value: 0.00 ,value2:0,value3:0 },
                            {name: '河北',value: 0.00 ,value2:0,value3:0 },{name: '河南',value: 1.58,value2:0,value3:0 },
                            {name: '云南',value: 32.54,value2:-0.3,value3:0.3 },{name: '辽宁',value: 8.00,value2:0.05,value3:-0.05},
                            {name: '黑龙江',value: 15.00,value2:-0.01,value3:-0.21 },{name: '湖南',value:128.89,value2:1.2,value3:1.35 },
                            {name: '安徽',value: 4.00,value2:0.05,value3:0.01 },{name: '山东',value: 32.11,value2:-0.1,value3:0.3},
                            {name: '新疆',value: 15.66,value2:0.24,value3:0.11 },{name: '江苏',value: 1.00,value2:-0.05,value3:-0.1 },
                            {name: '浙江',value: 1.00 ,value2:0.01,value3:0.04 },{name: '江西',value: 100.22,value2:0.2,value3:0.5 },
                            {name: '湖北',value: 102.78 ,value2:0.5,value3:1 },{name: '广西',value: 98.78,value2:0.23,value3:1.5 },
                            {name: '甘肃',value: 12.88,value2:0.01,value3:0.32 },{name: '山西',value: 4.00 ,value2:0.01,value3:0.04 },
                            {name: '内蒙古',value: 20.99,value2:0.21,value3:0.11 },{name: '陕西',value: 12.21,value2:-0.5,value3:-0.65 },
                            {name: '吉林',value:5.00 ,value2:-0.02,value3:0.03 },{name: '福建',value: 38.80,value2:0.01,value3:0.1 },
                            {name: '贵州',value:3.11 ,value2:0.04,value3:0.12 },{name: '广东',value: 1168.87,value2:0.98,value3:0.21 },
                            {name: '青海',value: 13.11,value2:0.12,value3:0.1 },{name: '西藏',value: 10.21,value2:0.1,value3:0.15 },
                            {name: '四川',value: 4.21,value2:0.01,value3:0.03 },{name: '宁夏',value: 20.32,value2:0.21,value3:0.35 },
                            {name: '海南',value: 23.11,value2:0.03,value3:0.21 },{name: '台湾',value: 4.00,value2:0.01,value3:0.21 },
                            {name: '香港',value: 150.11,value2:0.12,value3:0.03 },{name: '澳门',value: 160.98,value2:0.45,value3:0.6},{name: '南海诸岛',value: 0,value2:0,value3:0}
                        ],  //数据
                    }]
                }
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                // echarts.registerMap('china', china)
                let myChart = echarts.init(document.getElementById('china_map'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
  .main{
      width: 720px;
      height: 477px;
      position: absolute;
      left: 600px;
      top: 110px;
  }
</style>